<template>
	<view class="news-container">
		<view class="banner">
			<image src="../../static/icon/banner1.png"></image>
		</view>
		<view class="news-content">
			<view class="news-item" @click="goNewsDetail">
				<view class="left">
					<image src="../../static/icon/3.png" mode=""></image>
				</view>
				<view class="right">
					<view class="right-title">停水通知</view>
					<view class="right-content">接到水务局通知，由于修地铁原因将于今晚至明天22:00停水，总共停水24小时...</view>
					<view class="right-time">2019-05-06 12:10 </view>
				</view>
			</view>
			<view class="news-item">
				<view class="left">
					<image src="../../static/icon/1.png" mode=""></image>
				</view>
				<view class="right">
					<view class="right-title">寒潮预警通知</view>
					<view class="right-content">
                         中央气象台10月31日18时发布寒潮蓝色预警:受较强冷空气影响，预计...
                    </view>
					<view class="right-time">2019-05-06 12:10</view>
				</view>
			</view>
			<view class="news-item">
				<view class="left">
					<image src="../../static/icon/2.png" mode=""></image>
				</view>
				<view class="right">
					<view class="right-title">防台风通知</view>
					<view class="right-content">
                                根据天气预报通知,本市将会受第10号“麦德姆”台风影响，请各位业主做好...
                    </view>
					<view class="right-time">2019-05-06 12:10 </view>
				</view>
			</view>
			<view class="news-item">
				<view class="left">
					<image src="../../static/icon/2.png" mode=""></image>
				</view>
				<view class="right">
					<view class="right-title">防台风通知</view>
					<view class="right-content">
			                    根据天气预报通知,本市将会受第10号“麦德姆”台风影响，请各位业主做好...
			        </view>
					<view class="right-time">2019-05-06 12:10 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goNewsDetail() {
				uni.navigateTo({
					url: '../newsDetail/newsDetail'
				})
			} 
		}
	}
</script>

<style lang="scss">
	.news-container {
		.banner {
			width: 750rpx;
			height: 360rpx;
			image { 
				width: 100%;
				height: 100%;
			}
		}
		.news-content {
			width: 710rpx;
			position: relative;
			background-color: #f5f5f5;
			top: -64rpx;
			margin-left: 20rpx;
			// height: 200rpx;
			// background-color: pink;
			box-shadow: 0px 1rpx 4rpx 0px rgba(204, 204, 204, 0.5);
			border-radius: 8rpx;
			.news-item {
				border-radius: 8rpx;
				display: flex;
				height: 180rpx;
				margin-bottom: 11rpx;
				background-color: #fff;
				box-shadow: 0px 1rpx 4rpx 0px rgba(204, 204, 204, 0.5);
				.left {
					width: 164rpx;
					height: 180rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.right {
					flex: 1;
					padding-left: 16rpx;
					padding-top: 15rpx;
					.right-title {
						color: #333;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
					.right-content {
						font-size: 26rpx;
						color: #666;
						margin-bottom: 14rpx;
					}
					.right-time {
						color: #999;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>
